import React, { useEffect, useState } from 'react';
import { Card, Popover, List, Skeleton, Badge, Space, Image,Popconfirm,Modal,Input,message   } from 'antd';
import { getCommentsList,changeComments, delComments,addComments } from '@/api/article'
import { Link } from 'umi';

import indexStyle from '@/pages/index.less';

export default function IndexPage() {
  const [initLoading, setInitLoading] = useState(true);
  const [list, setList]: any = useState([]);
  const [val, setVal]: any = useState('');
  const [arr, setArr]: any = useState({});
  const any:any = localStorage.getItem('user')
  const user = JSON.parse(any);
  useEffect(() => {
    getCommentsList().then(({ data }) => {
      setList(data[0]);
      setInitLoading(false);
    });
  }, []);
// 修改评论状态
const changeCommentStatus = (id: string, pass: boolean) => {
  changeComments(id, pass).then((res) => {
    getCommentsList().then(({ data }) => {
      setList(data[0])
    })
  });
};
//删除评论
const delComment = (id: string) => {
  delComments(id).then((res) => {
    getCommentsList().then(({ data }) => {
      setList(data[0])
    })
  });
};
// 回复评论弹框
const { TextArea } = Input;
const [isModalOpen, setIsModalOpen] = useState(false);
const showModal = (item: any) => {
  setIsModalOpen(true);
  setVal('');
  setArr(item);
};

const handleOk =  () => {
   addComments({
    name: user.name,
    email: arr.email,
    content: val,
    createByAdmin:true,
    hostId: user.id,
    url: ' /details/' + user.id,
    parentCommentId: arr.id,
    replyUserName: arr.name,
    replyUserEmail: arr.email,
  }).then((res)=>{
     getCommentsList().then(({ data }) => {
    setList(data[0])
  })
  })

  setIsModalOpen(false);
};

const handleCancel = () => {
  setIsModalOpen(false);
};
const change = (e: any) => {
  console.log(e, 'val');
  setVal(e);
};
  return (
    <div className={indexStyle.mt20}>

      <Card title="最新评论" extra={<><Link to="/comment">全部评论</Link></>}>

        <List
          className="demo-loadmore-list"
          loading={initLoading}
          itemLayout="horizontal"

          dataSource={list}
          renderItem={(item: any) => (
            <List.Item
              actions={[

                <a key="list-loadmore-yes"
                onClick={() => {
                  changeCommentStatus(item.id, true);
                }}
                >通过</a>,
                <a key="list-loadmore-no"
                onClick={() => {
                  changeCommentStatus(item.id, false);
                }}
                >拒绝</a>,
                <a key="list-loadmore-edit" onClick={() => showModal(item)}>回复</a>,
                <Popconfirm
                title="你确定要删除吗?"
                onConfirm={() => {
                  delComment(item.id);
                }}
                style={{width:'400% !important'}}
                okText="确定"
                cancelText="取消"
              >
                <a key="list-loadmore-del" >删除</a>
                </Popconfirm>
                ,
              ]}
            >

              <Skeleton
                avatar
                title={false}
                loading={item.loading}
                active
                   >
                <List.Item.Meta
                  title={
                    <div>
                      <Space>

                      {item.name}
                      在
                      <Popover content={
                        <Image
                        width={300}
                        height={400}
                        src="error"
                        fallback=""
                      />
                      } title="页面预览">
                      <a>文章</a>
                      </Popover>
                      评论

                      <Popover content={
                      <div>
                        {item.content}
                      </div>}
                       title="评论详情-原始内容">
                      <a>回复内容</a>
                      </Popover>
                      {
                        item.pass ? <><Badge status="success" />通过</>:<><Badge status="warning" />未通过</>
                      }

                      </Space>
                    </div>
                  }

                />
              </Skeleton>
            </List.Item>
          )}
        />
      </Card>
      <Modal
        title="回复评论"
        open={isModalOpen}
        onOk={() => handleOk()}
        onCancel={handleCancel}
      >
        <TextArea
          rows={4}
          placeholder="支持 Markdown"
          maxLength={600}
          value={val}
          onChange={(e:any) => change(e.target.value)}
        />
      </Modal>
    </div>
  );
}
